<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>stm32</title>

	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			background-image: url('./img/download.png');
		}

		.header {
			background-color: #b3aaaa;
			padding: 10px;
			text-align: center;
		}

		.topnav {
			overflow: hidden;
			background-color: #918e8e;
		}

		.topnav a {
			float: left;
			display: block;
			color: #f1f1f1;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}

		.topnav a:hover {
			background-color: #ddd;
			color: black;
		}

		.footer {
			position: fixed;
			bottom: 0;
			height: 50px;
			font-size: 12px;
			font-family: "宋体";
			text-align: center;
			width: 100%;
		}
	</style>

	<script type="text/javascript" src="js/xhr.js"></script>
	<script type="text/javascript">
		function init() {
			refresh();
		}

		function refresh() {
			var post_req = {
				"type": 2
			};
			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					console.log(info);
					for (var i = 0; i < info.data.length; i++) {
						console.log('data = ', info.data[i].val)

						if (info.data[i].key == 302) {
							document.getElementById('bat').value = info.data[i].val;
						}
						else if (info.data[i].key == 303) {
							document.getElementById('led_switch').value = info.data[i].val;
						}
						else if (info.data[i].key == 301) {
							document.getElementById('light').value = info.data[i].val;
						}
					}

				}
			);
		}
	</script>
</head>

<body onload="init()">
	<div class="header">
		<h1>设备显示平台</h1>
	</div>
	<div class="topnav" style="height:50px;">
		<a href="temp_index.html">主页</a>
		<a href="modbus.html">modbus设备</a>
		<a href="stm32.html" style="background-color: #ddd;color: black;">stm32设备</a>
	</div>
	<div id="content" style="float:center;padding: 14px 16px;text-align: center;">
		<h2>
			<p>stm32</p>
		</h2>
		<p>电量</p>
		<input type="text" name="4001" id="bat" value="">
		<p>光照</p>
		<input type="text" name="4002" id="light" value="">
		<p>LED开关</p>
		<input type="text" name="4003" id="led_switch" value="">
		<br>
		</br>
		<input class="submit" name="" value="刷新" type="submit"
			style="display:block;margin: 20px auto;width: 100px;height: 50px;" onclick="refresh()" />
	</div>
	<div class="footer">
			Copyright © 2022 22071-SIXGROUP All Rights Reserved.</br>POWER BY 22071-SIXGROUP
		</div>
</body>

</html>